<template>
  <div class="package_deliver_write_off_index">
    <c-title :hide="false" text="酒券批量核销"></c-title>
    <div class="write_off_box" v-if="!is_record">
      <van-cell-group>
        <van-cell is-link @click="showCoupon">
          <template #title>
            <div class="title_l">酒券</div>
          </template>
          <template #default>
            <span>{{ checkCoupon }}</span>
          </template>
        </van-cell>
        <van-field v-model="num" type="digit" label="核销数量" placeholder="请输入核销数量" input-align="right"> </van-field>
      </van-cell-group>
      <div class="confirmBtn" @click="confirmM">确认</div>
    </div>
    <div class="tabBox">
      <van-tabs v-model="activeName">
        <van-tab title="批量核销记录"></van-tab>
      </van-tabs>
      <div class="list">
        <div class="lis" v-for="(item, index) in record_list" :key="index">
          <div class="lis_l">
            <div class="name" v-if="item.coupon">{{ item.coupon.name }}</div>
            <div class="count">数量：{{ item.num }}</div>
          </div>
          <div class="lis_r">
            <div class="time">{{ is_record ? "会员ID:" + item.member_id : item.created_at }}</div>
            <div class="status">{{ item.status_name }}</div>
          </div>
          <div class="lis_r" style="margin-top: 0.5rem;" v-if="is_record">
            <div class="time">{{ item.created_at }}</div>
            <div class="status"></div>
          </div>
          <div class="lis_r" style="margin-top: 0.5rem;" v-if="item.fail_str">
            <span style="color: rgba(16, 16, 16, 0.6);">失败原因:{{ item.fail_str }}</span>
          </div>
        </div>
      </div>
    </div>
    <van-popup v-model="show" position="bottom" :style="{ height: '50%' }" round>
      <van-nav-bar title="选择酒券" left-arrow @click-left="onClickLeft" @click-right="onClickRight">
        <template #right>
          <span>确认</span>
        </template>
        <template #left>
          <span style="color: #777777;" @click="show = false">取消</span>
        </template>
      </van-nav-bar>
      <div class="searchBox">
        <van-search v-model="keyword" placeholder="请输入酒券名称搜索" @search="searchTap" />
      </div>
      <div class="list">
        <van-radio-group v-model="radio">
          <van-cell-group>
            <van-cell clickable v-for="item in list" :key="item">
              <template #right-icon>
                <van-radio :name="item.id" />
              </template>
              <template #title>
                <div style="text-align: left;"  @click.stop="radioSelect(item)">{{ item.name }}</div>
              </template>
            </van-cell>
          </van-cell-group>
        </van-radio-group>
        <div class="loadMore" v-if="coupon.page < coupon.total_page" @click="loadMoreData">点击加载更多</div>
      </div>
    </van-popup>
    <van-popup v-model="codeShow" round closeable>
      <div class="codeBox">
        <img :src="codeImg" alt="" />
        <div class="txt">请机主扫码核销</div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import { scrollMixin } from "utils/mixin";
export default {
  mixins: [scrollMixin],
  data() {
    return {
      activeName: 0,
      num: "",
      show: false,
      keyword: "",
      radio: null,
      list: [],
      record_list: [],
      codeImg: "",
      codeShow: false,
      coupon: {
        page: 1,
        total_page: 0,
        isLoadMore: true
      },
      isLoadMore: true,
      page: 1,
      total_page: 0,
      is_record: false
    };
  },
  activated() {
    console.log(this.$route.params);
    if (this.$route.params.Record) {
      this.is_record = true;
    }
    this.init();
    this.getRecord();
  },
  computed: {
    checkCoupon() {
      let str = "请选择酒券";
      this.list.forEach(ele => {
        if (ele.id == this.radio) {
          str = ele.name;
        }
      });
      return str;
    }
  },
  methods: {
    searchTap(){
      this.coupon.page = 1;
      this.coupon.total_page = 0;
      this.coupon.isLoadMore = true;
      this.list = [];
      this.radio = null;
      this.getCoupon();
    },
    showCoupon() {
      this.show = true;
      this.coupon.page = 1;
      this.coupon.total_page = 0;
      this.coupon.isLoadMore = true;
      this.list = [];
      this.radio = null;
      this.getCoupon();
    },
    radioSelect(item) {
      if (this.radio == item.id) {
        this.radio = null;
        return;
      }
      this.radio = item.id;
    },
    onClickRight() {
      this.show = false;
    },
    onClickLeft() {
      this.radio = null;
      this.show = false;
    },
    init() {
      this.list = [];
      this.coupon.page = 1;
      this.coupon.total_page = 0;
      this.coupon.isLoadMore = true;
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
    },
    async confirmM() {
      if (!this.radio) {
        return this.$dialog.alert({
          title: "提示",
          message: "请选择酒券"
        });
      }
      if (!this.num) {
        return this.$dialog.alert({
          title: "提示",
          message: "请输入核销数量"
        });
      }
      let { data, msg, result } = await $http.post("plugin.gradevin-stock.frontend.controllers.write-off.write-off-code", { coupon_id: this.radio, num: this.num }, "");
      if (result) {
        this.codeImg = data.code;
        this.codeShow = true;
      } else {
        this.$toast(msg);
      }
    },
    async getRecord() {
      let urlstr = "plugin.gradevin-stock.frontend.controllers.write-off.write-off-log";
      if (this.is_record) {
        urlstr = "plugin.gradevin-stock.frontend.controllers.write-off.clerk-write-off-log";
      }
      let { data, msg, result } = await $http.post(urlstr, {}, "");
      if (result) {
        this.record_list = data.list.data;
        this.total_page = data.list.last_page;
        this.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async getMoreData() {
      if (!this.isLoadMore) return;
      this.isLoadMore = false; // 防止多次请求分页数据
      console.log(this.page,this.total_page,'wwwwwwwwww')
      if (this.page >= this.total_page) {
        return;
      } else {
        let urlstr = "plugin.gradevin-stock.frontend.controllers.write-off.write-off-log";
        if (this.is_record) {
          urlstr = "plugin.gradevin-stock.frontend.controllers.write-off.clerk-write-off-log";
        }
        this.page = this.page + 1;
        let { data, msg, result } = await $http.post(urlstr, { page: this.page }, "");
        this.isLoadMore = true;
        if (result) {
          this.record_list = this.record_list.concat(data.list.data);
        } else {
          this.page = this.page - 1;
          this.$toast(msg);
        }
      }
    },
    async getCoupon() {
      let { data, msg, result } = await $http.post("plugin.gradevin-stock.frontend.controllers.write-off.get-coupon-list", { page: this.coupon.page, keyword: this.keyword }, "");
      if (result) {
        this.list = data.data;
        this.coupon.total_page = data.last_page;
        this.coupon.isLoadMore = true;
      } else {
        this.$toast(msg);
      }
    },
    async loadMoreData() {
      if (!this.coupon.isLoadMore) return;
      this.coupon.isLoadMore = false;
      this.coupon.page = this.coupon.page + 1;
      let { data, msg, result } = await $http.post("plugin.gradevin-stock.frontend.controllers.write-off.get-coupon-list", { page: this.coupon.page, keyword: this.keyword }, "");
      this.coupon.isLoadMore = true;
      if (result) {
        this.list = this.list.concat(data.data);
      } else {
        this.coupon.page = this.page - 1;
        this.$toast(msg);
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.codeBox {
  margin: 2rem;
}
.list {
  display: flex;
  flex-direction: column;
  .lis {
    flex: 1;
  }
  .loadMore {
    text-align: center;
    margin: 1rem 0;
  }
}
.tabBox {
  border-radius: 0.5rem;
  box-sizing: border-box;
  .list {
    display: flex;
    flex-direction: column;
    margin: 1rem 0.6rem;
    .lis {
      padding: 0.63rem;
      box-sizing: border-box;
      margin-bottom: 0.63rem;
      background: #fff;
      .lis_l {
        display: flex;
        justify-content: space-between;
        margin-bottom: 0.5rem;
        .count {
          font-weight: bold;
          font-size: 0.8rem;
          flex-shrink: 0;
        }
        .name {
          font-weight: bold;
          font-size: 0.88rem;
          flex: 1;
          text-align: left;
        }
      }
      .lis_r {
        display: flex;
        justify-content: space-between;
        .time {
          color: rgba(16, 16, 16, 0.6);
        }
        .status {
          color: rgba(16, 16, 16, 0.6);
        }
      }
    }
  }
}
.write_off_box {
  margin: 1rem 0.65rem;
  overflow: hidden;
  border-radius: 0.5rem;
  padding: 0.5rem 0 1rem 0;
  background: #fff;
  box-sizing: border-box;
  .title_l {
    width: 100%;
    text-align: left;
  }
  .confirmBtn {
    margin: 0 1.5rem;
    background: #f15353;
    border-radius: 0.8rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1rem;
    margin-top: 1rem;
  }
}
</style>
